<template>
    <div class="reg">
       <header class="header">
         <router-link to='zhibo'>
             <div class="left">
              <img src=".././assets/img/BackIcon.png">
            </div>
         </router-link>
          
          <div class="center">我</div> 
       </header>
       <section class="section">
           
           <router-link to='zhuce'>
               <div class="reg">
                   立即登录/注册
               </div>
           </router-link>
           
           <p class="tishi">开通专属私人博客，还能签到抽大奖</p>
           <div class="zhibo">
               <div class="luzhi">录制节目</div>
               
               <div class="begain">开始直播</div>
           </div>
           
           <ul  class="nav">
               <li class='list'>
                   <span class="img">
                       <img src="../assets/img/xinxi.png">
                   </span>
                   <span class="content">信息</span>
               </li>
               <li class='list'>
                   <span class="img">
                       <img src="../assets/img/caogx.png">
                   </span>
                   <span class="content">草稿（0）</span>
               </li>
               <li class='list'>
                   <span class="img">
                       <img src="../assets/img/mianfll.png">
                   </span>
                   <span class="content">免流量服务</span>
                   <span class="right">未开通</span>
               </li>
               <li class='list'>
                   <span class="img">
                       <img src="../assets/img/wifi.png">
                   </span>
                   <span class="content">搜索免费Wi-Fi</span>
               </li>
               <li class='list'>
                   <span class="img">
                       <img src="../assets/img/video.png">
                   </span>
                   <span class="content">播放设置</span>
               </li>
               
               <router-link to='shezhi'>
                   <li class='list'>
                       <span class="img">
                           <img src="../assets/img/set.png">
                       </span>
                       <span class="content">其他设置</span>
                   </li>
               </router-link>
           </ul>
           
           
           
           
           
           
       </section>
       
       
    </div>

</template>


<script>
import Swiper from '../../static/js/swiper.min.js'
export default {
  name: 'reg',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>




<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import '.././assets/css/reset.css';    
@import '.././assets/less/style.less';
@import '.././assets/css/swiper.css';    
    .header{
        .px2rem(height,100);
        .px2rem(line-height,100);
        display: flex;
        .left{
            .padding-left(20);
        }
        .center{
            flex: 1;
            .padding-left(20);
        }
    }
    
    
    .section{
        .reg{
            .px2rem(height,90);
            .px2rem(line-height,90);
            .px2rem(width,520);
            .font-size(36);
            .border-radius(5);
            color: #52514d;
            font-weight: bold;
            margin: 0 auto;
            text-align: center;
            background: #eae8dc;
        }
        
        .tishi{
            text-align: center;
            color: #b8b5ae;
            .px2rem(height,100);
            .px2rem(line-height,100);
            .font-size(36);
        }
        
        .zhibo{
            .padding(0,20,0,20);
            display: flex;
            text-align: center;
            .px2rem(height,80);
            .px2rem(line-height,80);
            .luzhi{
                flex: 2;
                .border-radius(5);
                .border(1,solid,#fe5051);
                color: #fe5051;
                .margin-right(30);
                
            }
            .begain{
                flex: 1;
                .border-radius(5);
                background: #fe5051;
                color: white;
                
            }
        }
        
        
        .nav{
            .margin-top(70);
            .list{
                .px2rem(height,90);
                .px2rem(line-height,90);
                .margin-left(70);
                padding-left: -30px;
                .webkit();
                .border-bottom(1, solid,#e4e2d6);
                .img{
                    .padding-right(20);
                    .margin-left(-30);

                    
                }
                .content{
                    flex: 1;
                    .padding-left(10);
                    .font(28,#63625d);
                }
                .right{
                    .padding-right(20);
                    .font(28,#63625d);
                }
            }
        }
        
    }
    
    
</style>